<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">

      <el-input @keyup.enter.native="handleFilter" v-model="listQuery.name" style="width: 120px;" class="filter-item" placeholder="标识名称" clearable>
      </el-input>

      <el-select clearable style="width:120px" class="filter-item" v-model="listQuery.terminalBuilding" @change="selectRegion" placeholder="航站楼">
        <el-option v-for="item in terminalBuildingData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode">
        </el-option>
      </el-select>

      <el-select clearable style="width:120px" class="filter-item" v-model="listQuery.region" @change="selectPosition" placeholder="区域">
        <el-option v-for="item in regionData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode">
        </el-option>
      </el-select>

      <el-select clearable style="width:120px" class="filter-item" v-model="listQuery.position" placeholder="位置">
        <el-option v-for="item in positionData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode">
        </el-option>
      </el-select>

      <el-select clearable style="width:120px" class="filter-item" v-model="listQuery.category" placeholder="类别">
        <el-option v-for="item in categoryData" :key="item.code" :label="item.name" :value="item.code">
        </el-option>
      </el-select>

      <el-select clearable style="width:120px" class="filter-item" v-model="listQuery.status" placeholder="故障状态">
        <el-option v-for="item in lightStatusMap" :key="item.value" :label="item.label" :value="item.value">
        </el-option>
      </el-select>

      <el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button>
      <el-button v-if="sys_nolight_add" class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button>
      <el-button v-if="sys_nolight_add" class="filter-item" style="margin-left: 10px;" @click="importExcel" type="primary" icon="edit">导入</el-button>
      <el-button v-if="sys_nolight_upd && multipleSelectionFlag" class="filter-item" style="margin-left: 10px;" @click="handleSelectUpdate" type="primary" icon="edit">批量修改</el-button>
    </div>

    <el-dialog :title="title" :visible.sync="dialogVisible">
        <el-upload
                class="upload-demo"
                drag
                action=""
                :before-upload="beforeAvatarUpload"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传.xls、.xlsx文件</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary">确 定</el-button>
        </div>
    </el-dialog>

    <el-dialog :title="pictureTitle" :visible.sync="dialogVisiblePicture">
        <el-upload
                class="upload-demo"
                drag
                action=""
                :before-upload="beforePictureUpload"
                multiple>
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将图片拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传格式为jpg/jpeg/png的图片</div>
        </el-upload>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary">确 定</el-button>
        </div>
    </el-dialog>

    <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" stripe border fit highlight-current-row style="width: 100%" @selection-change="handleSelectionChange">

      <el-table-column type="selection" width="30">
      </el-table-column>

      <el-table-column align="center" label="编号">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="标识名">
        <template slot-scope="scope">
          <span>
           {{scope.row.name}}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="航站楼">
        <template slot-scope="scope">
          <span>{{scope.row.terminalBuildingName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="区域">
        <template slot-scope="scope">
          <span>{{scope.row.regionName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="位置">
        <template slot-scope="scope">
          <span>{{scope.row.positionName}}</span>
        </template>
      </el-table-column>      

      <el-table-column align="center" label="类别">
        <template slot-scope="scope">
          <span>{{scope.row.categoryName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="status-col" label="状态">
        <template slot-scope="scope">
          <el-tag>{{scope.row.status | nolightStatusFilter}}</el-tag>
        </template>
      </el-table-column>

      <!-- <el-table-column align="center" label="计量单位">
        <template slot-scope="scope">
          <span>{{scope.row.unit}}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="安装日期">
        <template slot-scope="scope">
          <span>{{scope.row.installationTime}}</span>
        </template>
      </el-table-column>

       <el-table-column align="center" label="质保年份">
        <template slot-scope="scope">
          <span>{{scope.row.warrantyYear}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="到期年份">
        <template slot-scope="scope">
          <span>{{scope.row.expectedScrapTime}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="handleInfo(scope.row)">详情
          </el-button>
          <el-button v-if="sys_nolight_upd" size="small" type="success" @click="handleUpdate(scope.row)">编辑
          </el-button>
          <el-button v-if="sys_nolight_del" size="small" type="danger" @click="deletes(scope.row)">删除
          </el-button>
        </template>
      </el-table-column>

    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,20,30,50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
    <!-- 详情   -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogDetails">
      <el-form :model="detailsData" ref="detailsData" label-width="120px">

        <el-row>
          <el-col :span="12" v-if="isShow">
            <el-form-item label="ID" prop="id">
              {{detailsData.id}}
            </el-form-item>
          </el-col> 
          <el-col :span="12" v-if="isShow">
           <el-form-item label="版本" prop="version">
              {{detailsData.version}}
            </el-form-item>
          </el-col> 

          <el-col :span="12">
            <el-form-item label="标识名：" prop="name">
              {{detailsData.name}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="类别：" prop="categoryName">
              {{detailsData.categoryName}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="航站楼：" prop="terminalBuildingName">
              {{detailsData.terminalBuildingName}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="区域：" prop="regionName">
              {{detailsData.regionName}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="位置：" prop="positionName">
              {{detailsData.positionName}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="光源：" prop="lightSource">
              {{detailsData.lightSource | lightFilter}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="规格：" prop="specificationName">
              {{detailsData.specificationName}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="计量单位：" prop="unit">
              {{detailsData.unit}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="安装日期：" prop="installationTime">
              {{detailsData.installationTime}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="预计报废日期：" prop="expectedScrapTime">
              {{detailsData.expectedScrapTime}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="质保年份：" prop="warrantyYear">
              {{detailsData.warrantyYear}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="编号：" prop="code">
              {{detailsData.code}}
            </el-form-item>
          </el-col>
        </el-row>
        
        <el-row>
          <el-col :span="12">
            <el-form-item label="材质：" prop="materialName">
              {{detailsData.materialName}}
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="厂商：" prop="providingUnitName">
              {{detailsData.providingUnitName}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="创建时间：" prop="createTime">
              {{detailsData.createTime}}
            </el-form-item>
          </el-col>

          <el-col :span="12" v-if="showVersion">
            <el-form-item label="修改时间：" prop="updateTime">
              {{detailsData.updateTime}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="备注：" prop="comment">
              {{detailsData.comment}}
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>示例图</span>
              </div>
              <div class="upload-container">
                <div class="component-item">
                  <div class="image-preview image-app-preview">
                    <div class="image-preview-wrapper" v-show="detailsData.sampleImage != ''">
                      <img :src="detailsData.sampleImage">
                      <div class="image-preview-action">
                        <i @click="rmImage"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      <el-button v-if="showVersion" type="primary" style="margin-left: 350px;" @click="oldVersion(detailsData.id)">查看以前版本</el-button>
      </el-form>
    </el-dialog>

    <!-- dialog -->
    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form :model="form" :rules="rules" ref="form" label-width="180px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="标识名" prop="name">
              <el-input style="width:90%" v-model="form.name" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="航站楼" prop="terminalBuilding">
              <el-select style="width:90%" v-model="form.terminalBuilding" @change="selectRegion" placeholder="请选择">
                <el-option v-for=" item in terminalBuildingData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>  

        <el-row>
          <el-col :span="12">
            <el-form-item label="区域" prop="region">
              <el-select style="width:90%" v-model="form.region" @change="selectPosition" placeholder="请选择">
                <el-option v-for=" item in regionData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="位置" prop="position">
              <el-select style="width:90%" v-model="form.position" placeholder="请选择">
                <el-option v-for=" item in positionData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="类别" prop="category">
              <el-select style="width:90%" v-model="form.category" placeholder="请选择">
                <el-option v-for=" item in categoryData" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="isShow">
            <el-form-item label="光源" prop="lightSource">
              <el-input style="width:90%" v-model="form.lightSource" placeholder="请选择">
              </el-input>
            </el-form-item>
          </el-col> 
          <el-col :span="12">
            <el-form-item label="规格" prop="specification">
              <el-select style="width:90%" v-model="form.specification" placeholder="请选择">
                <el-option v-for=" item in specificationData" :key="item.code" :label="item.content" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input style="width:90%" v-model="form.unit" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质保年份" prop="warrantyYear">
              <el-input style="width:90%" v-model="form.warrantyYear" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="安装日期" prop="installationTime">
              <el-date-picker style="width:90%" type="date" v-model="form.installationTime" placeholder="请填写">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期年份" prop="expectedScrapTime">
              <el-date-picker style="width:90%" type="date" v-model="form.expectedScrapTime" placeholder="请填写">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="材质" prop="material">
              <el-select style="width:90%" v-model="form.material" placeholder="请选择">
                <el-option v-for=" item in materialData" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="编号" prop="code">
              <el-input style="width:90%" v-model="form.code" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="厂商" prop="providingUnit">
              <el-select style="width:90%" v-model="form.providingUnit" placeholder="请选择">
                <el-option v-for=" item in providingUnit" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="20">
            <el-form-item label="备注" prop="comment">
              <el-input type="textarea" v-model="form.comment" placeholder="备注">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>示例图</span>
              </div>
              <div class="upload-container">
                <div class="component-item">
                  <div class="image-preview image-app-preview">
                    <div class="image-preview-wrapper" v-show="form.sampleImage != ''">
                      <img :src="form.sampleImage">
                      <div class="image-preview-action">
                        <i @click="rmImage"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="20">
           <el-button type="primary" style="margin-left: 350px;" @click="pictureUpload">上传图片</el-button>
          </el-col>
        </el-row>

      </el-form>
        
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel('form')">取 消</el-button>
        <el-button v-if="dialogStatus=='create'" type="primary" @click="create('form')">确 定</el-button>
        <el-button v-if="dialogStatus=='update'" type="primary" @click="update('form')">修 改</el-button>
      </div>

    </el-dialog>
    <!-- 批量修改 -->
  <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogSelectFormVisible">
      <el-form :model="selectForm" ref="selectForm" label-width="180px">

        <el-row>
          <el-col :span="12">
            <el-form-item label="航站楼" prop="terminalBuilding">
              <el-select style="width:90%" v-model="selectForm.terminalBuilding" @change="selectRegion" placeholder="请选择">
                <el-option v-for=" item in terminalBuildingData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>  

        <el-row>
          <el-col :span="12">
            <el-form-item label="区域" prop="region">
              <el-select style="width:90%" v-model="selectForm.region" @change="selectPosition" placeholder="请选择">
                <el-option v-for=" item in regionData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="位置" prop="position">
              <el-select style="width:90%" v-model="selectForm.position" placeholder="请选择">
                <el-option v-for=" item in positionData" :key="item.regionCode" :label="item.regionName" :value="item.regionCode"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="类别" prop="category">
              <el-select style="width:90%" v-model="selectForm.category" placeholder="请选择">
                <el-option v-for=" item in categoryData" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="规格" prop="specification">
              <el-select style="width:90%" v-model="selectForm.specification" placeholder="请选择">
                <el-option v-for=" item in specificationData" :key="item.code" :label="item.content" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input style="width:90%" v-model="selectForm.unit" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="质保年份" prop="warrantyYear">
              <el-input style="width:90%" v-model="selectForm.warrantyYear" placeholder="请输入" >
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="安装日期" prop="installationTime">
              <el-date-picker style="width:90%" type="date" v-model="selectForm.installationTime" placeholder="请填写">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="到期年份" prop="expectedScrapTime">
              <el-date-picker style="width:90%" type="date" v-model="selectForm.expectedScrapTime" placeholder="请填写">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="材质" prop="material">
              <el-select style="width:90%" v-model="selectForm.material" placeholder="请选择">
                <el-option v-for=" item in materialData" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="厂商" prop="providingUnit">
              <el-select style="width:90%" v-model="selectForm.providingUnit" placeholder="请选择">
                <el-option v-for=" item in providingUnit" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="20">
            <el-form-item label="备注" prop="comment">
              <el-input type="textarea" v-model="selectForm.comment" placeholder="备注">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" >
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>示例图</span>
              </div>
              <div class="upload-container">
                <div class="component-item">
                  <div class="image-preview image-app-preview">
                    <div class="image-preview-wrapper" v-show="selectForm.sampleImage != ''">
                      <img :src="selectForm.sampleImage">
                      <div class="image-preview-action">
                        <i @click="rmImage"></i>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="20">
           <el-button type="primary" style="margin-left: 350px;" @click="pictureUploadSelect">上传图片</el-button>
          </el-col>
        </el-row>

      </el-form>
        
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelSelect('selectForm')">取 消</el-button>
        <el-button v-if="dialogStatus=='update'" type="primary" @click="updateSelect('selectForm')">修 改</el-button>
      </div>

    </el-dialog>

    <!-- 历史版本table -->
    <el-dialog :title="titleVersion" :visible.sync="dialogVersion">
      <el-table :data="listVersion" stripe border fit highlight-current-row style="width: 100%">

      <!-- <el-table-column align="center" label="编号">
        <template slot-scope="scope">
          <span>{{scope.row.code}}</span>
        </template>
      </el-table-column> -->

      <el-table-column align="center" label="标识名">
        <template slot-scope="scope">
          <span>
           {{scope.row.name}}
          </span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="航站楼">
        <template slot-scope="scope">
          <span>{{scope.row.terminalBuildingName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="区域">
        <template slot-scope="scope">
          <span>{{scope.row.regionName}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="位置">
        <template slot-scope="scope">
          <span>{{scope.row.positionName}}</span>
        </template>
      </el-table-column>  

      <el-table-column align="center" label="版本时间">
        <template slot-scope="scope">
          <span>{{scope.row.createTime}}</span>
        </template>
      </el-table-column>    

      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button size="small" @click="handleInfo(scope.row)">详情
          </el-button>
        </template>
      </el-table-column>

    </el-table>
    </el-dialog>
  </div>
</template>

<style rel="stylesheet/scss" lang="scss" scoped>
@import 'src/styles/mixin.scss';
.upload-container {
  width: 100%;
  position: relative;
  @include clearfix;
  .image-uploader {
    width: 35%;
    float: left;
  }
  .image-preview {
    width: 200px;
    height: 200px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;
    .image-preview-wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .image-preview-action {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, 0.5);
      transition: opacity 0.3s;
      cursor: pointer;
      text-align: center;
      line-height: 200px;
    }
    &:hover {
      .image-preview-action {
        opacity: 1;
      }
    }
  }
  .image-app-preview {
    width: 320px;
    height: 180px;
    position: relative;
    border: 1px dashed #d9d9d9;
    float: left;
    margin-left: 50px;
    .app-fake-conver {
      height: 44px;
      position: absolute;
      width: 100%; // background: rgba(0, 0, 0, .1);
      text-align: center;
      line-height: 64px;
      color: #fff;
    }
  }
}
</style>

<script>
import {
  fetchList,
  getObj,
  addObj,
  putObj,
  delObj,
  getRegionByCode,
  getRegionByPid,
  allCategory,
  allMaterial,
  allVendor,
  allSpecification,
  importExc,
  importPicture,
  putObjSelect,
  getListVersion
} from '@/api/facility/light'
import waves from '@/directive/waves/index.js' // 水波纹指令
// import { } from '@/utils'
import { mapGetters } from 'vuex'

export default {
  name: 'table_facility',
  directives: {
    waves
  },
  data() {
    return {
      list: null,
      total: null,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        name: '',
        lightSource: 0,
        terminalBuilding: '',
        region: '',
        position: '',
        category: '',
        status: ''
      },
      form: {
        name: '',
        category: '',
        positionName: '',
        regionName: '',
        terminalBuildingName: '',
        lightSource: '',
        unit: '',
        installationTime: '',
        expectedScrapTime: '',
        warrantyYear: '',
        material: '',
        specification: '',
        providingUnit: '',
        comment: '',
        sampleImage: '',
        code: ''
      },
      detailsData: {
        name: '',
        category: '',
        position: '',
        region: '',
        terminalBuilding: '',
        lightSource: '',
        unit: '',
        installationTime: '',
        expectedScrapTime: '',
        warrantyYear: '',
        material: '',
        specification: '',
        providingUnit: '',
        comment: '',
        sampleImage: '',
        code: ''
      },
      selectForm: {
        category: '',
        position: '',
        region: '',
        terminalBuilding: '',
        unit: '',
        installationTime: '',
        expectedScrapTime: '',
        warrantyYear: '',
        material: '',
        specification: '',
        providingUnit: '',
        comment: '',
        sampleImage: ''
      },
      listVersion: {
        name: '',
        positionName: '',
        regionName: '',
        terminalBuildingName: '',
        code: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 30,
            message: '长度在 2 到 30 个字符',
            trigger: 'blur'
          }
        ],
        code: [
          {
            required: true,
            message: '请输入编号',
            trigger: 'blur'
          },
          {
            min: 2,
            max: 10,
            message: '长度在 2 到 10 个字符',
            trigger: 'blur'
          }
        ],
        terminalBuilding: [
          {
            required: true,
            message: '请选择航站楼',
            trigger: 'blur'
          }
        ],
        region: [
          {
            required: true,
            message: '请选择区域',
            trigger: 'blur'
          }
        ],
        position: [
          {
            required: true,
            message: '请选择位置',
            trigger: 'blur'
          }
        ],
        category: [
          {
            required: true,
            message: '请选择类别',
            trigger: 'blur'
          }
        ],
        installationTime: [
          {
            required: true,
            message: '请选择安装日期',
            trigger: 'blur'
          }
        ],
        expectedScrapTime: [
          {
            required: true,
            message: '请选择到期年份',
            trigger: 'blur'
          }
        ]
      },
      dialogFormVisible: false,
      dialogDetails: false,
      dialogStatus: '',
      isShow: false,
      terminalBuildingData: [],
      regionData: [],
      positionData: [],
      categoryData: [],
      specificationData: [],
      materialData: [],
      providingUnit: [],
      dialogVisible: false,
      title: '无源标识导入',
      dialogVisiblePicture: false,
      pictureTitle: '上传图片',
      multipleSelection: [],
      multipleSelectionFlag: false,
      dialogSelectFormVisible: false,
      dialogVersion: false,
      listVersion: [],
      showVersion: true,
      titleVersion: '设施旧版本',
      isForm: {},
      textMap: {
        update: '编辑',
        create: '新建',
        info: '详情'
      },
      lightStatusMap: [
        {
          label: '正常',
          value: 0
        },
        {
          label: '故障中',
          value: 1
        },
        {
          label: '维修中',
          value: 2
        }
      ],
      tableKey: 0
    }
  },
  computed: {
    ...mapGetters(['permissions'])
  },
  filters: {
    lightFilter(status) {
      const statusMap = {
        0: '无',
        1: '有'
      }
      return statusMap[status]
    },
    dropFilter(status) {
      const statusMap = {
        0: '在线',
        1: '掉线'
      }
      return statusMap[status]
    },
    lightStatusFilter(status) {
      const statusMap = {
        0: '正常',
        1: '故障中',
        2: '维修中'
      }
      return statusMap[status]
    },
    nolightStatusFilter(status) {
      const statusMap = {
        0: '正常',
        1: '故障中',
        2: '维修中'
      }
      return statusMap[status]
    },
    errorFilter(status) {
      const statusMap = {
        0: '正常',
        1: '熄灭',
        2: '闪烁',
        3: '灯箱非正常开盖'
      }
      return statusMap[status]
    }
  },
  created() {
    this.getList()
    getRegionByPid(0).then(response => {
      this.terminalBuildingData = response.data
    })
    allCategory().then(response => {
      this.categoryData = response.data
    })
    this.sys_nolight_add = this.permissions['sys_nolight_add']
    this.sys_nolight_upd = this.permissions['sys_nolight_upd']
    this.sys_nolight_del = this.permissions['sys_nolight_del']
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery.orderByField = '`fa`.status'
      this.listQuery.isAsc = false
      fetchList(this.listQuery).then(response => {
        this.list = response.data.records
        this.total = response.data.total
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    handleSizeChange(val) {
      this.listQuery.limit = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listQuery.page = val
      this.getList()
    },
    handleInfo(row) {
      getObj(row.id).then(response => {
        this.dialogStatus = 'info'
        this.dialogDetails = true
        this.detailsData = response.data
        if (response.data.version === 1) {
          this.showVersion = false
        } else {
          this.showVersion = true
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
      this.multipleSelectionFlag = true
      if (this.multipleSelection.length === 0) {
      // 如不进行判断则勾选完毕后批量删除按钮还是会在
        this.multipleSelectionFlag = false
      }
      // console.info(this.multipleSelection)
    },
    handleCreate() {
      this.resetTemp()
      this.dialogStatus = 'create'
      this.dialogFormVisible = true
      getRegionByPid(0).then(response => {
        this.terminalBuildingData = response.data
      })
      allCategory().then(response => {
        this.categoryData = response.data
      })
      allMaterial().then(response => {
        this.materialData = response.data
      })
      allVendor().then(response => {
        this.providingUnit = response.data
      })
      allSpecification().then(response => {
        this.specificationData = response.data
      })
    },
    handleUpdate(row) {
      getObj(row.id).then(response => {
        this.form = response.data
        this.dialogFormVisible = true
        this.dialogStatus = 'update'
        getRegionByPid(0).then(response => {
          this.terminalBuildingData = response.data
        })
        getRegionByCode(response.data.terminalBuilding).then(response => {
          this.regionData = response.data
        })
        getRegionByCode(response.data.region).then(response => {
          this.positionData = response.data
        })
        allCategory().then(response => {
          this.categoryData = response.data
        })
        allMaterial().then(response => {
          this.materialData = response.data
        })
        allVendor().then(response => {
          this.providingUnit = response.data
        })
        allSpecification().then(response => {
          this.specificationData = response.data
        })
      })
    },
    handleSelectUpdate(row) {
      this.dialogSelectFormVisible = true
      this.dialogStatus = 'update'
      // console.info('设施信息' + JSON.stringify(response.data))
      getRegionByPid(0).then(response => {
        this.terminalBuildingData = response.data
        // console.info('航站楼信息' + JSON.stringify(this.terminalBuildingData))
      })
      allCategory().then(response => {
        this.categoryData = response.data
      })
      allMaterial().then(response => {
        this.materialData = response.data
      })
      allVendor().then(response => {
        this.providingUnit = response.data
      })
      allSpecification().then(response => {
        this.specificationData = response.data
      })
    },
    oldVersion(id) {
      getListVersion(id).then(response => {
        this.dialogDetails = false
        this.dialogVersion = true
        this.listVersion = response.data
      })
    },
    selectRegion(code) {
      if (code != null && code !== '') {
        getRegionByCode(code).then(response => {
          this.regionData = response.data
        })
      }
    },
    selectPosition(code) {
      if (code != null && code !== '') {
        getRegionByCode(code).then(response => {
          this.positionData = response.data
        })
      }
    },
    create(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form).then(response => {
            if (response.data.code === 0) {
              this.dialogFormVisible = false
              this.getList()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify.error({
                title: '失败',
                message: response.data.msg,
                duration: 2000
              })
            }
          })
        } else {
          return false
        }
      })
    },
    cancel(formName) {
      this.dialogFormVisible = false
      this.$refs[formName].resetFields()
    },
    cancelSelect(formName) {
      this.dialogSelectFormVisible = false
      this.$refs[formName].resetFields()
    },
    update(formName) {
      const set = this.$refs
      set[formName].validate(valid => {
        if (valid) {
          putObj(this.form).then(response => {
            if (response.data.code === 0) {
              this.dialogFormVisible = false
              this.getList()
              this.$notify({
                title: '成功',
                message: '修改成功',
                type: 'success',
                duration: 2000
              })
            } else {
              this.$notify.error({
                title: '失败',
                message: response.data.msg,
                duration: 2000
              })
            }
          })
        } else {
          return false
        }
      })
    },
    updateSelect(formName) {
      const checkArr = this.multipleSelection // multipleSelection存储了勾选到的数据
      const params = []
      checkArr.forEach(function(item) {
        params.push(item.id) // 添加所有需要删除数据的id到一个数组，post提交过去
      })
      const data = {
        'form': this.selectForm,
        'ids': params
      }
      putObjSelect(data).then(response => {
        if (response.data.code === 0) {
          this.dialogSelectFormVisible = false
          this.getList()
          this.$notify({
            title: '成功',
            message: '修改成功',
            type: 'success',
            duration: 2000
          })
        } else {
          this.$notify.error({
            title: '失败',
            message: response.data.msg,
            duration: 2000
          })
        }
      })
    },
    deletes(row) {
      this.$confirm(
        '此操作将永久删除该标识, 是否继续?',
        '提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        delObj(row.id)
          .then(() => {
            this.getList()
            this.$notify({
              title: '成功',
              message: '删除成功',
              type: 'success',
              duration: 2000
            })
          })
          .cache(() => {
            this.$notify({
              title: '失败',
              message: '删除失败',
              type: 'error',
              duration: 2000
            })
          })
      })
    },
    resetTemp() {
      this.form = {
        id: undefined,
        name: '',
        category: '',
        position: '',
        region: '',
        terminalBuilding: '',
        lightSource: 0,
        unit: '',
        installationTime: '',
        expectedScrapTime: '',
        warrantyYear: '',
        specification: '',
        material: '',
        providingUnit: '',
        comment: '',
        sampleImage: ''
      }
    },
    rmImage() {},
    importExcel() {
      this.dialogVisible = true
    },
    // 上传前对文件的大小的判断
    beforeAvatarUpload(file) {
      var fileName = []
      fileName = file.name.split('.')
      const extension = fileName[fileName.length - 1] === 'xls'
      const extension2 = fileName[fileName.length - 1] === 'xlsx'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension && !extension2) {
        this.$message({
          message: '导入文件只能是xls、xlsx格式!',
          type: 'warning'
        })
      // console.log('上传模板只能是xls、xlsx格式!')
      }
      // if (!isLt2M) {
      //     this.$message({
      //     message: '上传模板大小不能超过 10MB!',
      //     type: 'warning'
      //   });
      // // console.log('上传模板大小不能超过 10MB!')
      // }
      if (extension || extension2) {
        // console.log(file)
        const fd = new FormData()
        fd.append('type', 0)
        fd.append('file', file)
        // console.log(fd)
        this.newImport(fd)
        return true
      }
      return extension || extension2
    },
    // 提示信息
    open: function(msg, code) {
      if (code === '0') {
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'success',
          callback: action => {
            this.dialogVisible = false
            location.reload()
          }
        })
      } else {
        this.$alert(msg, '提示', {
          confirmButtonText: '确定',
          type: 'error',
          callback: action => {
            this.dialogVisible = false
            location.reload()
          }
        })
      }
    },
    newImport(data) {
      importExc(data).then(response => { // 成功后回调
        const code = response.data.code
        const msg = response.data.msg
        this.open(msg, code)
      })
    },
    pictureUpload() {
      this.isForm = this.form
      this.dialogVisiblePicture = true
    },
    pictureUploadSelect() {
      this.isForm = this.selectForm
      this.dialogVisiblePicture = true
    },
    beforePictureUpload(file) {
      var fileName = []
      fileName = file.name.split('.')
      const extension = fileName[fileName.length - 1] === 'jpg'
      const extension2 = fileName[fileName.length - 1] === 'jpeg'
      const extension3 = fileName[fileName.length - 1] === 'png'
      if (!extension && !extension2 && !extension3) {
        this.$message({
          message: '上传图片只能是jpg/jpeg/png格式!',
          type: 'warning'
        })
      }
      if (extension || extension2 || extension3) {
        // console.log(file)
        const fd = new FormData()
        fd.append('uploadFile', file)
        this.newImportPicture(fd)
        return true
      }
      return extension || extension2 || extension3
    },
    // 提示信息
    openPic: function(code, purl) {
      if (code === 0) {
        this.$alert('上传成功', '提示', {
          confirmButtonText: '确定',
          type: 'success',
          callback: action => {
            this.dialogVisiblePicture = false
            this.isForm.sampleImage = purl
          }
        })
      } else {
        this.$alert('上传失败', '提示', {
          confirmButtonText: '确定',
          type: 'error',
          callback: action => {
            this.dialogVisiblePicture = false
          }
        })
      }
    },
    newImportPicture(data) {
      importPicture(data).then(response => { // 成功后回调
        const code = response.data.error
        const purl = response.data.url
        this.openPic(code, purl)
      })
    }
  }
}
</script>
